<template>
  <div style="margin-left:40px">
    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>VIP会员海报
    </div>

    <el-form :model="VIPList" label-width="100px">
      <el-form-item label="推广标题：">
        <el-input v-model="vipInfo.title" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="推广副标题：">
        <el-input v-model="vipInfo.intro" style="width:300px"></el-input>
      </el-form-item>
      
    </el-form>
    <div style="width:50%">
      <el-upload
        class="upload-demo"
        :action="imageUploadUrl"
        :on-remove="vipRemove"
        :on-success="vipSuccess"
        name="avatar"
        :file-list="VIPList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
      </el-upload>
    </div>
    <hr />

    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>邀请代理商海报
    </div>
    <div style="width:50%">
      <el-upload
        class="upload-demo"
        :action="imageUploadUrl"
        :on-remove="inviteRemove"
        :on-success="inviteSuccess"
        name="avatar"
        :file-list="inviteList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
      </el-upload>
    </div>
    <hr />
    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>主题海报
    </div>
    <div style="width:50%">
      <el-upload
        class="upload-demo"
        :action="imageUploadUrl"
        :on-remove="primaryRemove"
        :on-success="primarySuccess"
        name="avatar"
        :file-list="primaryList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
      </el-upload>
    </div>
    <hr />

    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>爆品海报
    </div>
    <el-button type="primary" @click="showCourse = true">选择课程</el-button>
    <el-table v-if="courseList.length !== 0" :data="courseList">
      <el-table-column align="center" prop="name" label="课程名称" width="250"></el-table-column>
      <el-table-column align="center" prop="name" label="海报图片" width="250">
        <template slot-scope="scope">
          <el-upload
            name="avatar"
            class="avatar-uploader"
            :action="imageUploadUrl"
            :show-file-list="false"
            :on-success="courseSuccess"
          >
            <img
              style="width:100px;height:100px"
              v-if="scope.row.url"
              :src="scope.row.url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <el-button type="primary" @click="uplaod(scope.$index)">点击上传</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column align="center" prop label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <hr />

    <div class="font-family-h font-bold margin-t40 margin-b40">
      <i class="square"></i>线下活动海报
    </div>
    <el-button type="primary" @click="showActivety = true">选择线下活动</el-button>
    <br />
    <el-button style="margin-top:20px" type="primary" @click="save(5)">保存</el-button>

    <el-dialog title="提示" :visible.sync="showCourse" width="60%">
      <span>请选择课程</span>
      <el-table :data="courseData" border style="width: 100%">
        <el-table-column prop="name" label="课程名称" width="200"></el-table-column>
        <el-table-column prop="parentCatName" label="分类" width="200"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="confrimCourse(scope.row)" type="primary" size="mini">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="showActivety" width="60%">
      <span>请选择课程</span>
      <el-table :data="activetyData" border style="width: 100%">
        <el-table-column prop="name" label="活动名称" width="200"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="confrimActivety(scope.row)" type="primary" size="mini">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { generalize, generalizeList } from "@/api/company";
import { getCourseList } from "@/api/course";
export default {
  data() {
    return {
      showCourse: false,
      imageUploadUrl: process.env.BASE_API + "/common/activities/imageUpload",
      VIPList: [],
      vipInfo:{
        
      },
      inviteList: [],
      primaryList: [],
      courseList: [],
      courseData: [],
      activetyData: [],
      index: "",
      showActivety: false
    };
  },
  methods: {
    addVIPCopy() {
      this.VIPList.copy.push("");
    },
    handleDelete(index) {
      this.courseList.splice(index, 1);
    },
    uplaod(index) {
      console.log(index);
      this.index = index;
    },
    confrimCourse(val) {
      var obj = {
        typeId: val.courseId,
        name: val.name,
        url: "",
        type: 4,
        link: "/homePage/course/courseDetail?courseId=" + val.courseId
      };
      this.courseList.push(obj);

      this.showCourse = false;
    },

    save(type) {
      // if (type == 1) {
      //   var obj = {
      //     data: this.deleteObj(this.VIPList)
      //   };
      // } else if (type == 2) {
      //   var obj = {
      //     data: this.deleteObj(this.inviteList)
      //   };
      // } else if (type == 3) {
      //   var obj = {
      //     data: this.deleteObj(this.primaryList)
      //   };
      // } else if (type == 4) {
      //   var obj = {
      //     data: this.courseList
      //   };
      // } else if (type == 5) {
      //   var obj = {
      //     data: this.courseList
      //   };
      // }
      var obj = {
        data: this.deleteObj(this.VIPList)
          .concat(this.deleteObj(this.inviteList))
          .concat(this.deleteObj(this.primaryList))
          .concat(this.deleteObj(this.courseList))
      };

      // for (let i = 0; i < array.length; i++) {
      //   const element = array[i];

      // }
      generalize(obj).then(res => {
        this.$message({
          message: res.data.data,
          type: "info"
        });
      });
    },
    getCourseData() {
      getCourseList().then(res => {
        this.courseData = res.data.data.list.data;
      });
    },
    deleteObj(obj) {
      for (let i = 0; i < obj.length; i++) {
        delete obj[i].status;
        delete obj[i].uid;
      }
      return obj;
    },
    courseSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        this.courseList[this.index].url = response.data.imageUrl;

        this.$message({
          message: "上传成功!",
          type: "info"
        });
      } else {
        this.$message({
          message: "上传失败，请稍候再试!",
          type: "info"
        });
      }
    },
    primarySuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        var obj = {
          name: file.name,
          url: response.data.imageUrl,
          type: 3,
          link: "/"
        };
        this.primaryList.push(obj);
        this.$message({
          message: "上传成功!",
          type: "info"
        });
      } else {
        this.$message({
          message: "上传失败，请稍候再试!",
          type: "info"
        });
      }
    },
    primaryRemove(file, fileList) {
      console.log(file, fileList);

      for (let i = 0; i < this.primaryList.length; i++) {
        const element = this.primaryList[i].url;
        if (file.url == element) {
          this.primaryList.splice(i, 1);
        }
      }
    },

    inviteSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        var obj = {
          name: file.name,
          url: response.data.imageUrl,
          type: 2,
          link: "/homePage/agent/agentIndex"
        };
        this.inviteList.push(obj);
        this.$message({
          message: "上传成功!",
          type: "info"
        });
      } else {
        this.$message({
          message: "上传失败，请稍候再试!",
          type: "info"
        });
      }
    },
    inviteRemove(file, fileList) {
      console.log(file, fileList);

      for (let i = 0; i < this.inviteList.length; i++) {
        const element = this.inviteList[i].url;
        if (file.url == element) {
          this.inviteList.splice(i, 1);
        }
      }
    },

    vipSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        var obj = {
          name: file.name,
          url: response.data.imageUrl,
          type: 1,
          link: "/member/vip/vipIndex"
        };
        this.VIPList.push(obj);
        this.$message({
          message: "上传成功!",
          type: "info"
        });
      } else {
        this.$message({
          message: "上传失败，请稍候再试!",
          type: "info"
        });
      }
    },
    vipRemove(file, fileList) {
      console.log(file, fileList);

      for (let i = 0; i < this.VIPList.length; i++) {
        const element = this.VIPList[i].url;
        if (file.url == element) {
          this.VIPList.splice(i, 1);
        }
      }
    },
    getData() {
      generalizeList().then(res => {
        if (res.data.data.explosive !== undefined) {
          this.courseList = res.data.data.explosive;
        }
        if (res.data.data.theme !== undefined) {
          this.primaryList = res.data.data.theme;
          console.log(2);
        }
        if (res.data.data.vip !== undefined) {
          this.VIPList = res.data.data.vip;
          console.log(3);
        }
        if (res.data.data.agency !== undefined) {
          this.inviteList = res.data.data.agency;
          console.log(4);
        }
      });
    }
  },
  watch: {},
  mounted() {
    this.getData();
    this.getCourseData();
  }
};
</script>
